<template>
  <div id="admin_doctor">
    <CommonTable
      :query-api="'/doctor/page'"
      :query-params="param"
      :columns="columns"
      @search-finish="searchFinish"
      ref="doctorRef"
      name="admin_doctor_table"
    >
      <template #tableSearchForm>
        <a-form id="internal_drawer_form_model" :model="formInfo" layout="inline">
          <a-form-item label="医院">
            <a-select
              v-model:value="formInfo.hospId"
              style="width: 240px"
              popupClassName="common_select_dropdown"
              @change="changeHosp"
              allowClear
              show-search
              :filter-option="filterOption"
            >
              <a-select-option
                v-for="item in hospList"
                :key="item.id"
                :value="item.id"
                :desc="item.desc"
                :code="item.code"
                >{{ item.desc }}</a-select-option
              >
            </a-select>
          </a-form-item>
          <a-form-item label="科室/诊室">
            <a-select
              v-model:value="formInfo.deptId"
              style="width: 240px"
              popupClassName="common_select_dropdown"
              allowClear
              show-search
              :filter-option="filterOption"
            >
              <a-select-option
                v-for="item in deptList"
                :key="item.value"
                :value="item.value"
                :label="item.label"
                >{{ item.label }}</a-select-option
              >
            </a-select>
          </a-form-item>
          <a-form-item label="医生信息">
            <a-input
              v-model:value="formInfo.doctorInfo"
              placeholder="医生信息"
              allowClear
              style="width: 200px"
            ></a-input>
          </a-form-item>
          <a-form-item label="出生年份">
            <a-select
              v-model:value="formInfo.birthYear"
              style="width: 120px"
              popupClassName="common_select_dropdown"
              allowClear
              show-search
              :filter-option="filterOption"
            >
              <a-select-option
                v-for="item in yearList"
                :value="item.value"
                :label="item.label"
                :key="item.value"
                >{{ item.label }}</a-select-option
              >
            </a-select>
          </a-form-item>

          <a-form-item class="filter_footer" :label-col="{ span: 0 }" :wrapper-col="{ span: 24 }">
            <a-space>
              <a-button type="primary" @click="onSerach" :loading="loading" :disabled="loading"
                >查询</a-button
              >
              <a-button @click="resetForm" :loading="loading" :disabled="loading">重置</a-button>
              <a-button @click="addRecord">新增</a-button>
            </a-space>
          </a-form-item>
        </a-form>
      </template>
      <template #otherAction="{ record }">
        <a-button size="small" @click="updateRecord(record)">修改</a-button>
      </template>
    </CommonTable>
    <EditModal
      ref="editRef"
      :hospList="hospList"
      :levelList="levelList"
      :degreeList="degreeList"
      @get-page="onSerach"
    ></EditModal>
  </div>
</template>
<script lang="ts" setup>
import CommonTable from '@/components/common_table/index.vue'
import type { TColumn } from '@/components/common_table/type'
import { getAllHospList, getDeptList, getDegreeList, getLevelList } from '@/axios/api/options_api'
import { filterOption } from '@/utils/filter_util'
import type { OptionsType, ListType } from '@/axios/api/type'
import { ref, h, onMounted, watch, onBeforeUnmount } from 'vue'
import type { FromType } from './type.ts'
import { cloneDeep } from 'lodash-es'
import moment from 'moment'
import EditModal from './edit_modal.vue'
const doctorRef = ref()
const editRef = ref()
const columns = ref<TColumn[]>([
  {
    title: '姓名',
    fixed: 'left',
    dataIndex: 'doctorName',
    key: 'doctorName',
    align: 'left',
    width: 180,
    ellipsis: true,
    showCol: true
  },
  {
    title: '年龄',
    dataIndex: 'doctorAge',
    key: 'doctorAge',
    align: 'left',
    width: 180,
    ellipsis: true,
    customRender: ({ text }) => {
      if (text) {
        return text + '岁'
      } else {
        return ''
      }
    },
    showCol: true
  },
  {
    title: '职称',
    dataIndex: 'doctorGradeDesc',
    key: 'doctorGradeDesc',
    align: 'left',
    width: 180,
    ellipsis: true,
    showCol: true
  },
  {
    dataIndex: 'doctorDegreeDesc',
    key: 'doctorDegreeDesc',
    title: '学历',
    align: 'left',
    width: 180,
    ellipsis: true,
    showCol: true
  },
  {
    title: '扩展码',
    dataIndex: 'doctorExtendCode',
    key: 'doctorExtendCode',
    align: 'center',
    width: 180,
    ellipsis: true,
    showCol: true
  },
  {
    title: '所属医院',
    dataIndex: 'hospName',
    key: 'hospName',
    align: 'center',
    width: 180,
    ellipsis: true,
    showCol: true
  },
  {
    title: '科室/诊室',
    dataIndex: 'deptName',
    key: 'deptName',
    align: 'center',
    width: 180,
    ellipsis: true,
    showCol: true
  },
  {
    fixed: 'right',
    title: '操作',
    width: 190,
    key: 'action',
    align: 'center',
    showCol: true
  }
])
const formInfo = ref<FromType>({
  deptId: '',
  birthYear: '',
  hospId: '',
  doctorInfo: ''
})
const param = ref<FromType>({
  ...cloneDeep(formInfo.value)
})
const loading = ref(false)
const hospList = ref<OptionsType[]>([])
const deptList = ref<ListType[]>([])
const levelList = ref<ListType[]>([])
const degreeList = ref<ListType[]>([])

const endYear = moment().year()
// 获取当前日期一百年前的年份
let startYear = moment().subtract(100, 'years').year()
const yearList = ref<ListType[]>([])
while (startYear <= endYear) {
  yearList.value.push({ value: startYear.toString(), label: startYear.toString() })
  startYear++
}
async function getOptionList() {
  const hospInfo = await getAllHospList().catch(() => {
    return {
      code: 400,
      data: []
    }
  })
  hospList.value = hospInfo.data
  const leveInfo = await getLevelList().catch(() => {
    return {
      code: 400,
      data: []
    }
  })
  levelList.value = leveInfo.data
  const degreeInfo = await getDegreeList().catch(() => {
    return {
      code: 400,
      data: []
    }
  })
  degreeList.value = degreeInfo.data
  onSerach()
}
function changeHosp(val: any) {
  if (val) {
    getDeptOption()
  } else {
    formInfo.value.deptId = ''
    deptList.value = []
  }
}
function getDeptOption() {
  getDeptList({ hospKey: formInfo.value.hospId || '' }).then((res) => {
    deptList.value = res.data || []
  })
}

function updateRecord(record: any) {
  console.log('%c [ record ]-555', 'font-size:13px; background:pink; color:#bf2c9f;', record)
  if (editRef.value) {
    editRef.value.showModal('update', record)
  }
}
function addRecord(record: any) {
  console.log('%c [ record ]-555', 'font-size:13px; background:pink; color:#bf2c9f;', record)
  if (editRef.value) {
    editRef.value.showModal('add')
  }
}
const stopFormWatcher = watch(
  formInfo,
  () => {
    param.value = cloneDeep(formInfo.value)
  },
  {
    deep: true
  }
)
function searchFinish() {
  loading.value = false
}
function resetForm() {
  formInfo.value = {
    deptId: '',
    doctorInfo: '',
    hospId: '',
    birthYear: ''
  }
  param.value = {
    deptId: '',
    doctorInfo: '',
    hospId: '',
    birthYear: ''
  }
  onSerach()
}
function onSerach() {
  if (doctorRef.value) {
    doctorRef.value.getPage(param.value)
  }
}
onMounted(() => {
  getOptionList()
})
onBeforeUnmount(() => {
  stopFormWatcher()
})
</script>
<style lang="scss" scoped>
#admin_doctor {
  @include w-h-cover();
}
</style>
